<template>
  <div class="person">
    <h1>中国</h1>
    <h2 ref="title2">北京</h2>
    <button @click="showH2">person组件：点击输出h2这个元素</button>
  </div>
</template>

<script setup lang="ts" name="PersonComponent">
import { ref, defineExpose } from 'vue';
// 定义响应式数据
let title2 = ref();
function showH2() {
  console.log(title2.value);
  console.log(document.getElementById('title2'));
}
let a = ref(1);
let b = ref(2);
let c = ref(22);
// 子组件加上这个后，父组件就可以直接使用子组件的响应式数据了
defineExpose({ a, b, c });
</script>

<style scoped>
.person {
  color: red;
}
ul li {
  font-size: 20px;
}
</style>
